<template>
  <el-header class="app-header">
    <div class="header-content">
      <div class="header-left">
        <h1 class="app-title">
          <el-icon><TrendCharts /></el-icon>
          <span class="title-text">股票数据展示系统</span>
        </h1>
      </div>

      <!-- 搜索框 -->
      <div class="header-search" v-if="showSearch">
        <el-input
          v-model="searchForm.stockCode"
          placeholder="请输入股票代码，如: 000001、sh.600000"
          size="large"
          @keyup.enter="handleSearch"
          @clear="clearSearch"
          class="search-input"
        >
          <template #prepend>
            <el-icon><Search /></el-icon>
          </template>
          <template #append>
            <el-button type="primary" @click="handleSearch" :loading="appStore.isLoading"> 查询 </el-button>
          </template>
        </el-input>
      </div>

      <div class="header-actions">
        <el-button type="primary" @click="goHome">
          <el-icon><House /></el-icon>
          <span class="button-text">首页</span>
        </el-button>
        <el-button type="info" @click="goAbout">
          <el-icon><InfoFilled /></el-icon>
          <span class="button-text">关于</span>
        </el-button>
      </div>
    </div>
  </el-header>
</template>

<script setup>
  import { ref, computed, watch } from 'vue';
  import { ElHeader, ElInput, ElButton, ElIcon, ElMessage } from 'element-plus';
  import { House, TrendCharts, Search, InfoFilled } from '@element-plus/icons-vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useAppStatusStore } from '@/stores/appStatus';

  const router = useRouter();
  const route = useRoute();
  const appStore = useAppStatusStore();

  // 搜索表单状态
  const searchForm = ref({
    stockCode: '',
  });

  // 计算属性
  const showSearch = computed(() => {
    return route.path === '/' || route.path.startsWith('/stock');
  });

  // 股票代码验证
  const validateStockCode = value => {
    if (!value) return false;
    const trimmedValue = value.trim();

    // 带市场前缀格式：sz.000001 或 sh.600000
    if (trimmedValue.match(/^(sz|sh)\.\d{6}$/)) {
      return true;
    }

    // 6位数字格式
    if (trimmedValue.match(/^\d{6}$/)) {
      return trimmedValue.startsWith('00') || trimmedValue.startsWith('30') || trimmedValue.startsWith('60') || trimmedValue.startsWith('68');
    }

    return false;
  };

  // 处理搜索
  const handleSearch = () => {
    if (!searchForm.value.stockCode.trim()) {
      ElMessage.warning('请输入股票代码');
      return;
    }

    const stockCode = searchForm.value.stockCode.trim();
    if (!validateStockCode(stockCode)) {
      ElMessage.error('股票代码格式不正确，支持6位数字（如：000001、600000）或带市场前缀（如：sz.000001、sh.600000）');
      return;
    }

    router.push(`/stock/${stockCode}`);
  };

  // 清空搜索
  const clearSearch = () => {
    searchForm.value.stockCode = '';
  };

  // 返回首页
  const goHome = () => {
    router.push('/');
  };

  // 前往关于页面
  const goAbout = () => {
    router.push('/about');
  };

  // 监听路由变化，更新搜索框的值
  watch(route, to => {
    if (to.params.code) {
      searchForm.value.stockCode = to.params.code;
    }
  });
</script>

<style scoped>
  .app-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0;
    height: 62px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  /* 手机端头部高度调整 */
  @media (max-width: 480px) {
    .app-header {
      height: auto !important;
      min-height: 100px !important;
      padding: 8px 0;
    }
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* 手机端头部内容适配 */
  @media (max-width: 768px) {
    .header-content {
      padding: 0 12px;
      flex-wrap: wrap;
      gap: 8px;
    }
  }

  @media (max-width: 480px) {
    .header-content {
      padding: 0 8px;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      height: auto;
      min-height: 100%;
    }
  }

  .header-left {
    flex-shrink: 0;
  }

  .app-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  /* 手机端标题优化 */
  @media (max-width: 768px) {
    .app-title {
      font-size: 16px;
      gap: 6px;
    }
    
    .title-text {
      display: none;
    }
    
    .app-title::after {
      content: '股票系统';
      font-size: 16px;
    }
  }

  @media (max-width: 480px) {
    .app-title {
      font-size: 14px;
      gap: 4px;
    }
    
    .app-title::after {
      font-size: 14px;
    }
  }

  .header-search {
    flex: 1;
    max-width: 500px;
    margin: 0 30px;
  }

  /* 手机端搜索框优化 */
  @media (max-width: 768px) {
    .header-search {
      margin: 0 15px;
      max-width: 100%;
      min-width: 240px;
    }
  }

  @media (max-width: 480px) {
    .header-search {
      margin: 0;
      width: 100%;
      order: 2;
    }
  }

  .search-input {
    width: 100%;
  }

  /* 搜索框整体容器 */
  .search-input :deep(.el-input) {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
  }

  /* 前置图标区域 */
  .search-input :deep(.el-input-group__prepend) {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 25px 0 0 25px;
    padding: 0 12px;
    margin: 0;
  }

  /* 输入框主体 */
  .search-input :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 15px;
  }

  .search-input :deep(.el-input__inner) {
    background: transparent;
    border: none;
    color: #303133;
    font-size: 14px;
    padding: 0;
  }

  .search-input :deep(.el-input__inner::placeholder) {
    color: #a8abb2;
  }

  /* 后置按钮区域 */
  .search-input :deep(.el-input-group__append) {
    background: transparent;
    border: none;
    border-radius: 0 25px 25px 0;
    padding: 0;
    margin: 0;
  }

  .search-input :deep(.el-input-group__append .el-button) {
    border-radius: 0 25px 25px 0;
    border: none;
    background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
    color: white;
    font-weight: 500;
    height: 100%;
    padding: 0 20px;
    margin: 0;
    transition: all 0.3s ease;
  }

  .header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }

  /* 手机端操作按钮优化 */
  @media (max-width: 768px) {
    .header-actions {
      gap: 8px;
    }
    
    .header-actions .button-text {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .header-actions {
      gap: 6px;
      order: 1;
      width: 100%;
      justify-content: space-between;
    }
    
    .header-left {
      order: 0;
    }
  }
</style>
""
